/* components */
import { 
  BaseSelectUserSelectPanelContainer,
  BaseSelectUserSelectPanelLeft,
  BaseSelectUserSelectPanelRight,
  BaseSelectUserRoleLeft,
  BaseSelectUserRoleRight
} from '@src/component/common/BaseSelectUser/components'
/* enum */
import { 
  BaseSelectUserComponentNameEnum,
  SelectUserComponentDepartment
} from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useFetchRoleList, useFetchRoleUserList } from '@src/component/common/BaseSelectUser/hooks'
import { useBaseSelectUserStoreCurrentToggleRole, useBaseSelectUserStoreRoleList, useBaseSelectUserStoreUserCountMap, useBaseSelectUserStoreUserListMap } from '@src/component/common/BaseSelectUser/store'
/* scss */
import '@src/component/common/BaseSelectUser/components/Role/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, onBeforeMount, PropType, watch } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { findComponentDownward } from '@src/util/assist'
import Log from '@src/util/log'
import { getDefaultSelectedRoleByRoleList } from '@src/component/common/BaseSelectUser/util'

export type RoleTabProps = {
  isMulti: boolean;
}

export interface RoleTabSetupState {
  // 部门列表
  departmentList: SelectUserComponentDepartment[];
}

export enum RoleTabEmitEventNameEnum {
  Input = 'input',
}

export type RoleTabInstance = ComponentInstance & RoleTabSetupState
export type RoleTabVM = ComponentRenderProxy<RoleTabProps> & CommonComponentInstance & RoleTabInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserRoleTab,
  emits: [],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup(props: RoleTabProps, { emit }) {
    
    const { currentToggleRole, setCurrentToggleRole } = useBaseSelectUserStoreCurrentToggleRole()
    const { roleList } = useBaseSelectUserStoreRoleList()
    const { setRoleUserList } = useBaseSelectUserStoreUserListMap()
    const { setRoleUserCount } = useBaseSelectUserStoreUserCountMap()
    
    // 获取角色列表
    const fetchRoleList = useFetchRoleList()
    // 获取角色人员列表
    const fetchRoleUserList = useFetchRoleUserList()
    
    // 初始化
    const initiate = () => {
      fetchRoleList().then(() => {
        
        const firstRole = getDefaultSelectedRoleByRoleList(roleList.value)
        setCurrentToggleRole(firstRole)
        
        fetchRoleUserList()
      })
    }
    
    watch(currentToggleRole, (newValue) => {
      setRoleUserList()
      setRoleUserCount()
    })
    
    onBeforeMount(() => {
      initiate()
    })
    
    return {
      initiate
    }
    
  },
  methods: {
    onLoadRoleUserListHandler() {
      
      const baseSelectUserInfiniteScrollUserComponent = findComponentDownward(this, BaseSelectUserComponentNameEnum.BaseSelectUserInfiniteScrollUser)
      
      try {
        baseSelectUserInfiniteScrollUserComponent.$el.scrollTop = 0
      } catch (error) {
        Log.error(error, this.onLoadRoleUserListHandler.name)
      }
      
    }
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserRoleTab}>
        <BaseSelectUserSelectPanelContainer>
        
          <BaseSelectUserSelectPanelLeft>
            <BaseSelectUserRoleLeft 
              is-multi={this.isMulti} 
              onLoadUser={this.onLoadRoleUserListHandler}
            />
          </BaseSelectUserSelectPanelLeft>
          
          <BaseSelectUserSelectPanelRight>
            <BaseSelectUserRoleRight is-multi={this.isMulti} />
          </BaseSelectUserSelectPanelRight>
          
        </BaseSelectUserSelectPanelContainer>
      </div>
    )
    
  }
})
